<template>
  <div id="app">
    <slot />
  </div>
</template>

<script>
export default {
  name: "kk-app", // 组件名称

  // 接收参数
  props: {
    bg: null // 背景图片
  },

  // 动态监听
  watch: {
    bg() {
      this.SetBackground();
    }
  },

  // 生命周期函数：挂载前调用
  created() {
    this.NewCss();
    this.IsPhone();
    this.SetPage();
  },

  // 生命周期函数：挂载后调用
  mounted() {
    this.SetApp();
    this.SetBackground();
  },

  // 页面方法
  methods: {
    // 是否手机
    IsPhone() {
      const phone = window.screen.height > window.screen.width; // 判断屏幕是不是竖屏
      window.localStorage.setItem("Phone", phone); // 储存
    },

    // 设置页面
    SetPage() {
      const // 创建对象
        html = document.documentElement.style,
        body = document.body.style;
      html.height = body.height = "100%"; // 注入高度
      html.width = body.width = "100%"; // 注入宽度
      html.margin = body.margin = "0vw"; // 注入外边距
      html.padding = body.padding = "0vw"; // 注入内边距
      html.display = body.display = "block"; // 注入显示类型
      html.position = body.position = "relative"; // 注入定位模式
    },

    // 设置App
    SetApp() {
      const app = document.getElementById("app").style;
      app.height = app.width = "100%"; // 注入宽高
      app.display = "block"; // 注入显示类型
      app.position = "relative"; // 注入定位模式
      app.fontSize = "0vw";
    },

    // 设置背景
    SetBackground() {
      const app = document.getElementById("app").style;
      if (this.bg) app.background = `center/cover no-repeat url('${bg}')`; // 注入背景图片
    },

    // 创建CSS
    NewCss() {
      const sid = "kk-css";
      if (!document.getElementById(sid)) {
        const // 创建对象
          color = [
            "--blueberry:rgb(64,158,255);", // 蓝莓
            "--mushroom:rgb(144,147,153)", // 蘑菇
            "--cherry:rgb(245,108,108);", // 樱桃
            "--matcha:rgb(103,194,58);", // 抹茶
            "--taro:rgb(220,223,230);", // 香芋
            "--yolk:rgb(230,162,60);", // 蛋黄
            "--sesame:rgb(48,49,51);" // 芝麻
          ], // 颜色定义
          css = [
            `:root{${color.join("")}}`,
            "*{box-sizing:border-box;line-height:1;min-width:0vw;}",
            "::-webkit-scrollbar{display:none;}",
            ".HW{height:100%;width:100%;}",
            ".H{height:100%;}",
            ".W{width:100%;}",
            ".FL{float:left;}",
            ".FR{float:right;}",
            ".TAL{text-align:left;}",
            ".TAC{text-align:center;}",
            ".TAR{text-align:right;}",
            ".ND{user-select:none;cursor:default;}",
            ".NP{user-select:none;cursor:pointer;}"
          ];

        document.write(`<style id="${sid}">${css.join(" ")}</style>`);
      }
    }
  }
};
</script>
